<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>查找</title>
	<link rel="stylesheet" href="/static/layim-v3.7.6/src/css/layui.css">
	<style type="text/css">
		.div-row {
			height: 75px;
		}
		.div-row div:first-child {
			text-align: right
		}
		.header{
			width: 75px; height: 75px; border-radius: 50px
		}
		.div-text{
			margin-top: 15px;
			line-height: 25px
		}
	</style>
</head>
<body>

<div class="layui-tab layui-tab-brief">
	<ul class="layui-tab-title">
		<li class="layui-this">找人</li>
		<li>找群</li>
	</ul>

	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="请输入昵称" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="number" name="id" placeholder="请输入ID" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="hidden" name="t" value="1">
						<button type="button" class="layui-btn" lay-submit lay-filter="sub">查 找</button>
					</div>
				</div>
			</form>

			<div class="layui-fluid">
				<div class="layui-row layui-col-space10" id="list1">
					<?php foreach($user as $vo) : ?>
					<div class="layui-col-md3">
						<div class="layui-row layui-col-space10 div-row">
							<div class="layui-col-md4">
								<img src="<?=$vo['avatar']?>" class="header">
							</div>
							<div class="layui-col-md8 div-text">
								<p><?=$vo['username']?>（<?=$vo['id']?>）</p>
								<p><a class="layui-badge layui-bg-green" onclick="add(1, <?=$vo['id']?>, '<?=$vo['username']?>', '<?=$vo['avatar']?>')">+ 好友</a></p>
							</div>
						</div>
					</div>
					<?php endforeach;?>
				</div>
			</div>
		</div>

		<div class="layui-tab-item">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" name="name" placeholder="请输入群名称" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="number" name="id" placeholder="请输入群ID" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="hidden" name="t" value="2">
						<button type="button" class="layui-btn" lay-submit lay-filter="sub">查 找</button>
					</div>
				</div>
			</form>

			<div class="layui-fluid">
				<div class="layui-row layui-col-space10" id="list2">
					<?php foreach($group as $vo) : ?>
					<div class="layui-col-md3">
						<div class="layui-row layui-col-space10 div-row">
							<div class="layui-col-md4">
								<img src="<?=$vo['avatar']?>" class="header">
							</div>
							<div class="layui-col-md8 div-text">
								<p><?=$vo['groupname']?>（<?=$vo['id']?>）</p>
								<p><a class="layui-badge layui-bg-green" onclick="add(2, <?=$vo['id']?>, '<?=$vo['groupname']?>', '<?=$vo['avatar']?>')">+ 群</a></p>
							</div>
						</div>
					</div>
					<?php endforeach;?>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="/static/layim-v3.7.6/src/layui.js"></script>
<script>
layui.use(['element','form','layim'], function(){
	let element = layui.element;
	let form = layui.form;
	let layim = layui.layim;
	let $ = layui.jquery;
	// 提交事件
	form.on('submit(sub)', function(data){
		data = data.field; // 获取表单字段值
		$.post("/user/findList", data, function (res) {
			let html = '<div class="layui-col-md12">未找到结果，试试搜点别的吧</div>';
			if (res.data.length > 0) {
				html = '';
				$.each(res.data, function (k,v) {
					html += '<div class="layui-col-md3"><div class="layui-row layui-col-space10 div-row">';
					html += `<div class="layui-col-md4"><img src="${v.avatar}" class="header"></div>`;
					html += '<div class="layui-col-md8 div-text">';
					html += `<p>${v.name}（${v.id}）</p>`;

					if (res.ids.indexOf(v.id) > -1) {
						if (data.t == "1") {
							html += `<p><a class="layui-badge layui-bg-green">已是好友</a></p>`;
						}else {
							html += `<p><a class="layui-badge layui-bg-green">已加群</a></p>`;
						}
					} else {
						if (data.t == "1") {
							html += `<p><a class="layui-badge layui-bg-green" onclick="add(1, ${v.id}, '${v.name}', '${v.avatar}')">+ 好友</a></p>`;
						}else {
							html += `<p><a class="layui-badge layui-bg-green" onclick="add(2, ${v.id}, '${v.name}', '${v.avatar}')">+ 群</a></p>`;
						}
					}

					html += '</div></div></div>';
				})
			}
			$("#list"+data.t).html(html);
		}, "json")
	});
});

function add(t, id, name, avatar) {
	let layim = layui.layim;
	switch (t) {
		case 1:
			layim.add({
				type: "friend",
				username: name,
				avatar: avatar,
				group : [{id:0,groupname:'我的好友'}],
				submit: function (groupid, remark, t) {
					console.log(groupid)
					console.log(remark)
					console.log(t)

					layer.msg("好友申请已发送，请等待对方确认", {
						icon: 1,
						shade: .5
					}, function () {
						layer.close(t);
						window.parent.add(1, id, groupid, remark);
					})
				}
			})
			break;
		case 2:
			layim.add({
				type: "group",
				username: name,
				avatar: avatar,
				submit: function (groupid, remark, t) {
					layer.msg("申请已发送，请等待管理员确认", {
						icon: 1,
						shade: .5
					}, function () {
						layer.close(t);
						window.parent.add(2, id, 0, remark);
					})
				}
			})
			break;
	}
}
</script>
</body>
</html>
